@extends('admin::public.base')
<style>
#options{
    display:none;
}
#addType{
    display:none;
    padding: 10px 10px 0px 0px;
}
</style>
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <header class="title">修改配置<button class="layui-btn" onclick="addType()" style="position: absolute;right: 15px;">添加类型</button></header>
        </div>
        <div class="layui-card-body">
            <div class="layui-form">
                <input type="hidden" name="id" value="{{$config->id}}">
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置类型</label>
                    <div class="layui-input-block">
                        <select name="type_id" id="type_id">
                            @foreach ($types as $item)
                                <option value="{{$item->id}}" @if($config->type_id==$item->id) selected @endif>{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" disabled autocomplete="off" value="{{$config->name}}" class="layui-input" placeholder="由英文字母和下划线组成，如：web_name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="title" autocomplete="off" value="{{$config->title}}" class="layui-input" placeholder="如：网站名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">内容类型</label>
                    <div class="layui-input-block">
                        <select name="value_type" id="value_type" disabled>
                            <option value="text" @if($config->value_type=='text') selected @endif>text</option>
                            <option value="number" @if($config->value_type=='number') selected @endif>number</option>
                            <option value="password" @if($config->value_type=='password') selected @endif>password</option>
                            <option value="textarea" @if($config->value_type=='textarea') selected @endif>textarea</option>
                            <option value="checkbox" @if($config->value_type=='checkbox') selected @endif>checkbox</option>
                            <option value="radio" @if($config->value_type=='radio') selected @endif>radio</option>
                            <option value="select" @if($config->value_type=='select') selected @endif>select</option>
                            <option value="switch" @if($config->value_type=='switch') selected @endif>switch</option>
                            <option value="array" @if($config->value_type=='array') selected @endif>array</option>
                            <option value="date" @if($config->value_type=='date') selected @endif>date</option>
                            <option value="time" @if($config->value_type=='time') selected @endif>time</option>
                            <option value="datetime" @if($config->value_type=='datetime') selected @endif>datetime</option>
                            <option value="image" @if($config->value_type=='image') selected @endif>image</option>
                            <option value="images" @if($config->value_type=='images') selected @endif>images</option>
                            <option value="file" @if($config->value_type=='file') selected @endif>file</option>
                            <option value="ueditor" @if($config->value_type=='ueditor') selected @endif>ueditor</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置内容</label>
                    <div class="layui-input-block" id="value">
                        @if ($config->value_type=='text')
                            <input type="text" class="layui-input" autocomplete="off" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='number')
                            <input type="number" class="layui-input" autocomplete="off" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='password')
                            <input type="password" class="layui-input" autocomplete="off" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='date')
                            <input type="text" class="layui-input" autocomplete="off" id="date" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='time')
                            <input type="text" class="layui-input" autocomplete="off" id="time" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='datetime')
                            <input type="text" class="layui-input" autocomplete="off" id="datetime" name="value" value="{{$config->value}}">
                        @elseif($config->value_type=='textarea'||$config->value_type=='array')
                            <textarea name="value" class="layui-textarea">{{$config->value}}</textarea>
                        @elseif($config->value_type=='switch')
                            <input type="checkbox" name="value" @if ($config->value==2) checked @endif lay-text="开启|禁用" lay-filter="switch" lay-skin="switch">
                        @elseif($config->value_type=='radio'||$config->value_type=='select')
                            <input type="text" name="value" autocomplete="off" value="{{$config->value}}" class="layui-input" placeholder="填写配置项中的key，如：1">
                        @elseif($config->value_type=='checkbox')
                        <input type="text" name="value" autocomplete="off" value="{{$config->value}}" class="layui-input" placeholder="填写配置项中的key，多个用逗号隔开，如：1,2,3">
                        @elseif($config->value_type=='image')
                            <div class="app-image-box">
                                @if($config->value)
                                <div class="box">
                                    <input type="hidden" name="value" value="{{$config->value}}">
                                    <img src="{{$config->value}}" alt="">
                                    <em onclick="delImage(this)" title="删除">×</em>
                                </div>
                                @endif
                            </div>
                            <div class="app-btn-file"><input type="file" name="image" accept="image/*" class="app-image"  onchange="imageCallBack(this)"/>
                            <div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div>
                        @elseif($config->value_type=='images')
                            <div class="app-btn-file"><input type="file" accept="image/*" class="app-image" name="images[]" multiple onchange="imagesCallBack(this)"/>
                            <div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div>
                            <div class="app-image-box">
                                @foreach ($config->value as $item)
                                    <div class="box">
                                        <input type="hidden" value="{{$item}}">
                                        <img src="{{$item}}" alt="">
                                        <em onclick="delImages(this)" title="删除">×</em>
                                    </div>
                                @endforeach
                            </div>
                        @elseif($config->value_type=='ueditor')
                            <textarea name="value" id="ueditor" class="layui-textarea">{{$config->value}}</textarea>
                        @endif
                    </div>
                </div>
                <div class="layui-form-item" @if($config->value_type=='radio'||$config->value_type=='select'||$config->value_type=='checkbox') style="display:block;" @else style="display:none;" @endif>
                    <label for="" class="layui-form-label">配置项</label>
                    <div class="layui-input-block">
                        <textarea name="options" class="layui-textarea">{{$config->options}}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" id="sort" autocomplete="off" value="" class="layui-input" placeholder="倒序排列">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置说明</label>
                    <div class="layui-input-block">
                        <textarea name="desc" id="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit=""  lay-filter="submit">确 认</button>
                        <a href="javascript:history.back(-1)" class="layui-btn layui-btn-primary" >返 回</a>
                    </div>
                </div>
                <div id="addType">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label layui-required">类型名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="typeName" autocomplete="off" value="" class="layui-input" placeholder="请输入类型名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">类型描述</label>
                        <div class="layui-input-block">
                            <textarea id="typeDesc" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" id="typeSort" autocomplete="off" value="" class="layui-input" placeholder="倒序排序">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit=""  lay-filter="typeSubmit">确 认</button>
                            <a href="javascript:layer.closeAll()" class="layui-btn layui-btn-primary" >关 闭</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="/static/common/plugins/kindeditor/kindeditor-all.js"></script>
<script src="/static/common/plugins/kindeditor/lang/zh-CN.js"></script>
<script src="/static/common/plugins/jquery/dist/jquery.gridly.js"></script>
    <script>
        layui.use(['layer','form','laydate'],function () {
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;
            var image = "";
            var images = [];
            //时间插件初始化
            laydate.render({
                elem: '#date',
                type: 'date', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
            laydate.render({
                elem: '#time',
                type: 'time', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
            laydate.render({
                elem: '#datetime',
                type: 'datetime', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
            //监听指定开关
            form.on('switch(switch)', function(data) {
                this.value = this.checked ? 2 : 1;
            });
            //多图片初始化
            $('.app-image-box').find('.box').each(function () {
                var oldimg = {};
                var path = $(this).find('img').attr('src');
                oldimg.path = path;
                images.push(oldimg);
            })
            //富文本编辑器
            window.editor = KindEditor.create('#ueditor', {
                height: '300px',
                width:'100%',
                themeType: 'default',
                allowPreviewEmoticons: false,
                allowImageUpload: true,
                allowFileManager: true,
                uploadJson: "{{ route('admin.editorUpload') }}",
                afterBlur: function(){ this.sync(); },
                afterUpload: function (url) {
                    this.sync();
                },
                items: [
                    'undo', 'redo','|','justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','|',
                    'fontname', 'fontsize','forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat','|','image', 'multiimage',
                    'emoticons','link', 'unlink'
                ]
            });
            //新增类型
            window.addType = function(){
                layer.open({
                    type: 1,
                    content: $('#addType'),
                    title: '新增类型',
                    skin:'layui-skin',
                    area: ['450px', '330px'],
                    shade: 0.8,
                });
            }
            form.on('submit(typeSubmit)',function(data){
                var typeName = $('#typeName').val();
                var typeDesc = $('typeDesc').val();
                var typeSort = $('#typeSort').val();
                if(!typeName){
                    layer.msg('请输入类型名称');
                    return false;
                }
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{route('admin.config.typeStore')}}",
                    data: {
                        name : typeName,
                        desc : typeDesc,
                        sort : typeSort
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                layer.closeAll();
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
            })
            //单图片上传
            window.imageCallBack = function(obj){
                var file = obj.files[0];
                var path = window.uploadBack(file);
                var html = '<div class="box">';
                html += '<input type="hidden" value="'+path+'"/>'
                html += '<img src="'+path+'" title="'+file.name+'" />';
                html += '<em onclick="delImage(this)" title="删除">×</em>';
                html += '</div>';
                $(obj).parent().prev('.app-image-box').html(html);
                $(obj).parent().prev('.app-image-box').viewer('update');
                image = file;
            }
            //多图片上传
            window.imagesCallBack = function(obj){
                var files = obj.files;
                if (files.length > 0) {
                    var html = "";
                    for (var i = 0; i < files.length; i++) {
                        var path = window.uploadBack(files[i]);
                        html += '<div class="box">';
                        html += '<img src="' + path + '" alt="">';
                        html += '<em onclick="delImages(this)" title="删除">×</em>';
                        html += '</div>';
                        files[i].path = path;
                        images.push(files[i]);
                    }
                    $('.app-image-box').append(html);
                    $('.app-image-box').viewer('update');
                    window.gridlyinit();
                }
            }
            //拖拽回调
            window.reordered = function (data) {
                //先销毁预览事件
                console.log(data);
                $('.app-image-box').viewer('destroy');
                //隔100ms 防止在拖拽放下那一瞬间 返回的left top不准确
                var verb = [];
                setTimeout(function () {
                    for (var i = 0; i < data.length; i++) {
                        //获取排序后的当前索引为i的div对象
                        var current = data[i];
                        var Class = current.className;
                        if (Class && Class.indexOf('box') > -1) {
                            var path = $(current).find('img').attr('src');
                            for (var j = 0; j < images.length; j++) {
                                if (path == images[j].path) {
                                    verb.push(images[j]);
                                }
                            }
                        }
                    }
                    images = verb;
                    verb = [];
                    $('.app-image-box').viewer();
                }, 100);
            }
            //拖拽初始化
            window.gridlyinit = function () {
                $('.app-image-box').gridly({
                    base: 30,
                    gutter: 10,
                    columns: 24,
                    callbacks: {
                        reordered: window.reordered
                    }
                });
            }
            if('{{$config->value_type}}'=='images'){
                window.gridlyinit();
            }
            $('.app-image-box').viewer();
            //删除单图
            window.delImage = function (obj) {
                $(obj).parent().parent().next('.app-btn-file').find('input').val("");
                $(obj).parent().remove();
                image = "";
            }
            //删除多图片
            window.delImages = function (obj) {
                var path = $(obj).parent().find('img').attr('src');
                for (var i = 0; i < images.length; i++) {
                    if (path == images[i].path) {
                        images.splice(i, 1);
                    }
                }
                $(obj).parent().remove();
                $('.app-image-box').viewer('update');
                window.gridlyinit();
            }
            //表单提交
            form.on('submit(submit)', function (data) {
                var formData = new FormData();
                //验证表单
                if (!data.field.name) {
                    layer.tips('请输入配置名称', '#name', { tips: 3 });
                    return false;
                }
                if (!data.field.title) {
                    layer.tips('请输入配置标题', '#title', { tips: 3 });
                    return false;
                }
                if(data.field.value_type=='file'){
                    layer.msg('文件类型暂不支持');
                    return false;
                }
                if(data.field.value_type=='image'&&image){
                    formData.append('image',image);
                }
                if(data.field.value_type=='images'&&images.length>0){
                    console.log(images);
                    for (var i = 0; i < images.length; i++) {
                        if (images[i].name) {
                            formData.append("images[" + i + "]", images[i]);
                        } else {
                            formData.append("images[" + i + "]", images[i]['path']);
                        }
                    }
                }
                formData.append('name',data.field.name);
                formData.append('title',data.field.title);
                formData.append('value_type',data.field.value_type);
                if(!data.field.value){
                    formData.append('value',"");
                }else{
                    formData.append('value',data.field.value);
                }
                formData.append('desc',data.field.desc);
                formData.append('sort',data.field.sort);
                formData.append('options',data.field.options);
                formData.append('type_id',data.field.type_id);
                formData.append('id',data.field.id);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{route('admin.config.editData')}}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                location.href = "{{route('admin.config.list')}}";
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
            })
        })
    </script>
@endsection
